<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <style>
        :root{
            font-size:16px;
        }
        @media(max-width:500px){
            :root{
                font-size:14px;
            }
        }
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        ::selection{
            background: #123456;
            color: #fff;
        }
        body{
            overflow: hidden;
        }
        h1{
            font-size: 5rem;
        }
        h2{
            font-size: 2rem;
        }
        img{
            width: 100%;
            height: auto;
            background: #f0f0f0;
            object-fit: contain;
        }
        ul{
            padding-left: 1rem;
            list-style: none;
        }
        li{
            flex-shrink: 0;
            width: clamp(500px,60vw,800px);
            padding-right: 1rem;
        }
        header{
            height: 100vh;
        }
        footer{
            height: 50vh;
        }
        :any-link{
            color: #3e1232;
        }
        .df{
            display: flex;
        }
        .aic{
            align-items: center;
        }
        .jcc{
            justify-content: center;
        }
        .loader{
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background: #000;
            color: #fff;
        }
        .demo-wrapper{
            overflow: hidden;
        }
        .wrapper{
            display: flex;
        }
        .demo-gallery:not(.last){
            padding-bottom: 1rem;
        }
        .demo-text .text{
            font-size: clamp(8rem,15vw,16rem);
            line-height: 1;
            font-weight: 900;
        }
    </style>
    <div class="loader df aic jcc">
        <div>
            <div>loading</div>
            <h2 class="loader--text">0%</h2>
        </div>
    </div>
    <div class="demo-wrapper">
        <header class="df aic jcc">
            <div>
                <h1>ScrollTrigger</h1>
                <h2>demo</h2>
            </div>
        </header>
        <section class="demo-text">
            <div class="wrapper text">
                https://codepen.io/noeldelgado/pen/BaogqYy
            </div>
        </section>
        <section class="demo-gallery">
            <ul class="wrapper">
                <li>
                    <img height="874" alt="" src="image/img1.jpg" width="30%">
                </li>
                <li>
                    <img height="874" alt="" src="image/img2.jpg" width="30%">
                </li>
                <li>
                    <img height="874" alt="" src="image/img3.jpg" width="30%">
                </li>
            </ul>
        </section>
        <section class="demo-gallery">
            <ul class="wrapper">
                <li>
                    <img height="874" alt="" src="image/img1.jpg" width="30%">
                </li>
                <li>
                    <img height="874" alt="" src="image/img2.jpg" width="30%">
                </li>
                <li>
                    <img height="874" alt="" src="image/img3.jpg" width="30%">
                </li>
            </ul>
        </section>
        <section class="demo-gallery">
            <ul class="wrapper">
                <li>
                    <img height="874" alt="" src="image/img1.jpg" width="30%">
                </li>
                <li>
                    <img height="874" alt="" src="image/img2.jpg" width="30%">
                </li>
                <li>
                    <img height="874" alt="" src="image/img3.jpg" width="30%">
                </li>
            </ul>
        </section>
        <section class="demo-text">
            <div class="wrapper text">
                gasp:https://greensock.com/docs/v3/Installation
            </div>
        </section>
        <footer class='df aic jcc'>
            <p>Images from <a href="https://unsplash.com/">Unsplash</a></p>
        </footer>
    </div>
    <script src="js/gsap/gsap.min.js"></script>
    <script src="js/gsap/ScrollTrigger.min.js"></script>
    <script src="js/imagesloaded.min.js"></script>
    <script>
        gsap.registerPlugin(ScrollTrigger);
        const images= gsap.utils.toArray("img");
        console.log(images);
        const loader = document.querySelector(".loader--text");
        const updateProgress = (instance)=>{
            console.log(instance.progressedCount);
            let content = Math.round(instance.progressedCount*100/images.length);
            console.log(content);
            loader.textContent = content;
        }
        
        const showDemo =()=>{
            document.body.style.overflow="auto";
            document.scrollingElement.scrollTo(0,0);
            gsap.to(document.querySelector(".loader"),{ autoAlpha:0 });
            gsap.utils.toArray("section").forEach((section,index)=>{
                const w= section.querySelector(".wrapper");
                const [x,xEnd] = index %2?["100%",(w.scrollWidth-section.offsetWidth)*-1]:[w.scrollWidth*-1,0];
                console.log(x,xEnd);
                gsap.fromTo(w,{x},{
                    x:xEnd,
                    scrollTrigger:{
                        trigger:section,
                        scrub:0.5
                    }
                });    
            });
        }
        imagesLoaded(images).on("progress",updateProgress).on("always",showDemo);
    </script>
</body>
</html>